<template>
  <swiper
    class="src"
    :modules="modules"
    :pagination="{ clickable: true }"
    :navigation="true"
    :autoplay="{
      delay: 2500,
    }"
    :style="{
      '--swiper-pagination-bullet-inactive-color': '#fff',
      '--swiper-theme-color': '#3644bf',
      '--swiper-navigation-color': '#fff',
      '--swiper-navigation-size': '25px',
      '--swiper-pagination-bullet-inactive-opacity': 1,
    }"
  >
    <swiper-slide class="slide" v-for="item in props.imgs"
      ><img :src="item" alt=""
    /></swiper-slide>
  </swiper>
</template>
<script setup lang="ts" name="">
import { Pagination, Navigation, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
interface Props {
  imgs?: Array<string>;   //图片数组
}
const props = withDefaults(defineProps<Props>(), {
  imgs: () => [],
});

// const nextEl:any = ()=> ('<div>11</div>');
// Autoplay.delay =
const modules = [Pagination, Navigation, Autoplay];
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
